<query-editor-row query-ctrl="ctrl" can-collapse="true">
  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-8">
        Type
        <a bs-tooltip="ctrl.errors.queryTypes" style="color: rgb(229, 189, 28)" ng-show="ctrl.errors.queryTypes">
          <i class="fa fa-warning"></i>
        </a>
      </label>
      <div class="gf-form-select-wrapper width-10">
        <select ng-model="ctrl.target.queryType" class="gf-form-input" ng-options="type for type in ctrl.queryTypes"
          ng-change="ctrl.targetBlur()">
        </select>
      </div>
    </div>

    <div class="gf-form-inline" ng-hide="ctrl.target.resultFormat === 'table'">
      <div class="gf-form max-width-30">
        <label class="gf-form-label query-keyword width-8">ALIAS BY</label>
        <input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false'
          placeholder="Naming pattern: a,{{'{{'}}col}}" ng-blur="ctrl.panelCtrl.refresh()">
      </div>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>
  <div class="gr-form gf-form--grow" ng-switch on="ctrl.target.queryType">
    <div ng-switch-when="SQL" ng-switch-when-separator="|" class="gf-form  gf-form--grow">
      <div class="gf-form-inline gf-form--grow">
        <div class="gf-form gf-form--grow">
          <label class="gf-form-label query-keyword width-8">INPUT SQL</label>
          <input type="text" class="gf-form-input min-width-30 max-width-100 gf-form--grow" style="width: 100%"
            ng-model="ctrl.target.sql" spellcheck='false'
            placeholder="select avg(mem_system)  from log.dn where ts >= $from and ts < $to interval($interval)"
            ng-blur="ctrl.panelCtrl.refresh()" data-mode="sql"></input>
        </div>
      </div>
    </div>

    <div ng-switch-when="SQL" ng-switch-when-separator="|" class="gf-form gf-form--grow">
        <label class="gf-form-label query-keyword width-8">Timeshift</label>
        <input type="number" class="gf-form-input width-10" placeholder="period number like: 1"
          ng-model="ctrl.target.timeshift.period" ng-change="ctrl.targetBlur()" ng-model-onblur />
        <label class="gf-form-label query-keyword width-8">
          Unit
        </label>
        <div class="gf-form-select-wrapper min-width-12 max-width-22">
          <select ng-model="ctrl.target.timeshift.unit" class="gf-form-input"
            ng-options="timeshiftUnit for timeshiftUnit in ['seconds', 'minutes', 'hours', 'days', 'weeks', 'months']"
            ng-change="ctrl.targetBlur()">
            <option value="" disabled>Please Select</option>
          </select>
        </div>
        <label class="gf-form-label" bs-tooltip="ctrl.target.errors.timeshiftUnit" style="color: rgb(229, 189, 28)"
          ng-show="ctrl.target.errors.timeshiftUnit">
          <i class="fa fa-warning"></i>
        </label>
        <div class="gf-form gf-form--grow">
          <div class="gf-form-label gf-form-label--grow"></div>
        </div>
    </div>
    <div ng-switch-when="SQL" ng-switch-when-separator="|" class="gf-form gf-form--grow">
      <div class="gf-form width-8">
        <label class="gf-form-label gf-form--grow query-keyword" ng-click="ctrl.generateSQL()">
          GENERATE SQL
          <i class="fa fa-caret-down" ng-show="ctrl.showGenerateSQL"></i>
          <i class="fa fa-caret-right" ng-hide="ctrl.showGenerateSQL"></i>
        </label>
      </div>
      <div class="gf-form width-8">
        <label class="gf-form-label gf-form--grow query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
          SHOW HELP
          <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
          <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
        </label>
      </div>
      <label class="gf-form-label query-keyword width-8">
        Format new col new
      </label>
      <div class="gf-form-select-wrapper min-width-12 max-width-22">
        <select ng-model="ctrl.target.formatType" class="gf-form-input" ng-options="type for type in ctrl.formatTypes"
          ng-change="ctrl.targetBlur()">
        </select>
      </div>
      <div class="gf-form gf-form--grow">
        <div class="gf-form-label gf-form-label--grow"></div>
      </div>
    </div>
    <div ng-switch-when="SQL" ng-switch-when-separator="|" class="gf-form gf-form--grow">
      <label class="gf-form-label query-keyword width-10">
        Group by column name(s)
      </label>
      <input type="text" class="gf-form-input width-10" ng-model="ctrl.target.colNameToGroup"
        ng-change="ctrl.targetBlur()" ng-model-onblur />
      <label class="gf-form-label query-keyword width-10 disabled">
        Format to
      </label>
      <input type="text" class="gf-form-input width-20" ng-model="ctrl.target.colNameFormatStr"
        ng-change="ctrl.targetBlur()" placeholder="prefix_{{'{{'}}group_field}}" ng-model-onblur />
      <div class="gf-form gf-form--grow">
        <div class="gf-form-label gf-form-label--grow"></div>
      </div>
    </div>
    <div ng-switch-when="SQL" ng-switch-when-separator="|" class="gf-form max-width-100">
      <div class="gf-form" ng-show="ctrl.showGenerateSQL">
        <pre class="gf-form-pre">{{ctrl.lastGenerateSQL}}</pre>
      </div>

      <div class="gf-form" ng-show="ctrl.showHelp">
        <pre class="gf-form-pre alert alert-info">Use any SQL that can return Resultset such as:
- [[timestamp1, value1], [timestamp2, value2], ... ]

Macros:
- $from -&gt; start timestamp of panel
- $to -&gt; stop timestamp of panel
- $interval -&gt; interval of panel

Example of SQL:
&nbsp;&nbsp;SELECT count(*)
&nbsp;&nbsp;FROM db.table
&nbsp;&nbsp;WHERE ts > $from and ts < $to
&nbsp;&nbsp;INTERVAL ($interval)
        </pre>
      </div>

      <div class="gf-form" ng-show="ctrl.lastQueryError">
        <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
      </div>
    </div>
    <div ng-switch-when="Arithmetic" ng-switch-when-separator="|" class="gf-form">
      <label class="gf-form-label query-keyword width-10">
        Expression
      </label>
      <input type="text" class="gf-form-input width-20" ng-model="ctrl.target.expression" spellcheck='false'
        placeholder="Arithmetic pattern: A+1 or [A+A__0,A]" ng-blur="ctrl.targetBlur()" />
      <label class="gf-form-label" bs-tooltip="ctrl.target.errors.expression" style="color: rgb(229, 189, 28)"
        ng-show="ctrl.target.errors.expression">
        <i class="fa fa-warning"></i>
      </label>

    </div>
  </div>
</query-editor-row>
